<template>
  <form class="card comment-form">
    <div class="card-block">
      <textarea
        v-model="comment"
        class="form-control"
        placeholder="Write a comment..."
        rows="3"
        @blur="$emit('not-editing')"
      ></textarea>
    </div>
    <div class="card-footer">
      <img :src="user.image" class="comment-author-img" />
      <button class="btn btn-sm btn-primary" @click.prevent="postComment">
        Post Comment
      </button>
    </div>
  </form>
</template>

<script>
import { postArticleComment } from "@/api/article";
import { mapState } from "vuex";

export default {
  name: "PostComment",

  props: {
    slug: {
      type: String,
      required: true,
    },
    body: {
      type: String,
    },
  },

  data() {
    return {
      comment: this.body || "",
    };
  },

  computed: {
    ...mapState(["user"]),
  },

  methods: {
    async postComment() {
      try {
        const comment = await postArticleComment(this.slug, this.comment);
        this.comment = "";
        this.$emit("postComment", comment);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
